<template>
  <ContentBox width="100%" height="48%">
    <div class="exam_detail">
      <div v-for="(item, index) in examDetail" :key="index" class="exam_item">
        <span class="values">{{ item.value }}</span>
        <span class="types">{{ item.type }}</span>
      </div>
    </div>
    <TableList class="tablist" />
  </ContentBox>
</template>

<script>
import ContentBox from './contentBox.vue'
import TableList from './TableList.vue'

export default {
  components: {
    ContentBox,
    TableList,
  },
  data() {
    return {
      examDetail: [
        {
          type: '课程数量',
          value: 12345,
        },
        {
          type: '试题数量',
          value: 30000,
        },
        {
          type: '试卷数量',
          value: 2000,
        },
      ],
    }
  },
}
</script>

<style scoped lang="scss">
.exam_detail {
  display: flex;
  width: 100%;
  height: 20%;
  justify-content: space-around;
  .exam_item {
    width: 25%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
    font-weight: 700;
    font-style: normal;
    color: #f2f2f2;
    border-radius: 3px;
    .values {
      font-size: 20px;
    }
    .types {
      font-size: 18px;
    }
  }
  > :nth-child(1) {
    background: linear-gradient(
      180deg,
      rgba(101, 170, 244, 1) 0%,
      rgba(101, 170, 244, 1) 0%,
      rgba(51, 101, 198, 1) 100%,
      rgba(51, 101, 198, 1) 100%
    );
  }
  > :nth-child(2) {
    background: linear-gradient(
      180deg,
      rgba(96, 239, 194, 1) 0%,
      rgba(96, 239, 194, 1) 0%,
      rgba(39, 180, 144, 1) 100%,
      rgba(39, 180, 144, 1) 100%
    );
  }
  > :nth-child(3) {
    background: linear-gradient(
      180deg,
      rgba(249, 217, 96, 1) 0%,
      rgba(249, 217, 96, 1) 0%,
      rgba(234, 137, 20, 1) 100%,
      rgba(234, 137, 20, 1) 100%
    );
  }
}
.tablist {
  margin-top: 15px;
}
</style>